<template>
  
  <view class="list">
       <u-modal v-model="celshow" :show-cancel-button="true" content="确认取消收藏吗" @confirm="delcart"></u-modal>
    <view class="" style="margin-top: 400rpx;"  v-if="usercollect.list.length===0" >
      <u-empty text="暂无收藏" mode="favor"></u-empty>
    </view>
    
    <view class="Full-item"  v-for="(item, index) in usercollect.list" :key="item.id" v-else @click="tiaozhuan(item.id)"> 
      <!-- 中 -->
      <view class="item-c">
        <!-- 图片 -->
        <view class="item-img">
          <image :src="item.image_url" mode=""></image>
        </view>
      </view>
      <!-- 右 -->
      <view class="item-nr">
        <text class="nr-title">{{item.name}}</text>
        <text class="nr-guige">规格：默认</text>
        <text class="nr-price">￥{{item.unit_price}}</text>
        <!-- 右 -->
        <view class="item-y" >
         <view class="favi"  @click.stop="collect(item.id)">
           <u-icon name="star-fill" size="36rpx" ></u-icon>
           <text>已收藏</text>
         </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
 import { ref } from "vue";
import {
   useUserStore
 } from "../../store/user.js"
 const userStore = useUserStore()
  //获取收藏列表
  const {
    usercollect
  } = userStore
  userStore.getcollectlist()
  //取消收藏弹框
  const celshow = ref(false)
  //取消收藏商品$("#")
  const goods_id = ref(goods_id)
  //收藏该商品
  function collect(id){
     goods_id.value = id
     celshow.value = true
  }
  function delcart(){
      userStore.collect(goods_id.value)
        userStore.getcollectlist()
  }
  //跳转详情页面
  function tiaozhuan(goodid){
    uni.navigateTo({
      url: `/subPack/goods_detail/goods_detail?goods_id=${goodid}`
    })
  }
</script>

<style scoped lang="scss">
.Full-item {
        width: 100%;
        height: 270rpx;
        display: flex;
        border-top: 1px solid #f4f4f4;
        border-bottom: 1px solid #f4f4f4;
        // 中
        .item-c {
          // border: 1px solid red;
          display: flex;
           margin-left: 40rpx;
          // 图片
          .item-img {
            width: 200rpx;
            height: 300rpx;
            // border: 1px solid red;
            display: flex;
            align-items: center;
            /* 垂直居中 */

            image {
              width: 100%;
              height: 70%;
              border-radius: 10rpx;
            }
          }


        }

        // 内容
        .item-nr {
          width: 90%;
          height: 300rpx;
          // border: 1px solid red;
          position: relative;
          left: 20rpx;

          .nr-title {
            margin: 20rpx 10rpx;
            margin-top: 50rpx;
            font-size: 30rpx;
            overflow: hidden;

            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
          }

          .nr-guige {
            display: block;
            color: #888888;

            margin-left: 20rpx;
            font-size: 12px;
          }

          .nr-price {
            display: block;
            color: #ffaa00;
            margin-left: 20rpx;
            margin-top: 10rpx;

          }

          // 右
          .item-y {
            width: 180rpx;
            height: 80rpx;
            // border: 1px solid red;
            position: absolute;
            bottom: 50rpx;
            right: 10rpx;
            display: flex;
            align-items: center;
            justify-content: space-between;
 .favi{
          color: #ffaa00;;
        }


          }
        }
      }
    
    
</style>
